<template>
    <div class="settings">
        <div class="inner w">
            <div class="title">账号设置</div>
            <div class="container">
                <div class="c-title">
                    <img src="../assets/login-img.png"/>
                    <span>{{phone}}</span>
                </div>
                <div class="inner">
                    <el-collapse v-model="activeNames" @change="handleChange">
                    <el-collapse-item  name="1">
                        <template slot="title">
                            <div class="pass">
                                <span>密码：</span><span>*********</span><span>[修改密码]</span>
                            </div>
                        </template>
                        <div class="passDiv">
                            <div class="h50">
                                <div class="pub-leftTitle">当前密码：</div>
                                <input v-model="currentPass" type="text" name="" autocomplete="off" value=""/>
                            </div>
                            <div class="h50">
                                <div class="pub-leftTitle">新密码：</div>
                                <input v-model="newPass" type="password" name="" autocomplete="off" value=""/>
                            </div>
                            <div class="h50">
                                <div class="pub-leftTitle">确认新密码：</div>
                                <input v-model="repeatPass" type="password" name="" autocomplete="off" value=""/>
                            </div>
                            <div class="h50" style="margin: 25px 0;">
                                <div class="pub-leftTitle"></div>
                                <input @click="submit"  class="btn" type="button" value="保存"/>
                            </div>
                        </div>
                    </el-collapse-item>
                    </el-collapse>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  import { hasLogin, rePass, outUser } from '../api/getData.js'

  export default {
    name: 'settings',
    data: function () {
      return {
        activeNames: [],
        phone: '',
        currentPass: '',
        newPass: '',
        repeatPass: '',
        status: false
      }
    },
    created: function () {
      hasLogin().then((data) => {
        if (data.data.status == 1) {
          let name = data.data.userInfo.type === 1 ? data.data.userInfo.nickname : '用户名 / ' + data.data.userInfo.nickname
          console.log('--name--', name)
          this.phone = name
        }
      })
    }, // 创建时
    beforeMount: function () {}, // 挂载之前
    mounted: function () {
      this.$bus.$emit('footShow', false)
    }, // 挂载之后
    beforeUpdate: function () {}, // 数据更新时调用,在渲染之前
    updated: function () {}, // 数据更新后,渲染后调用(禁止)
    beforeDestroy: function () {}, // 实例销毁前调用,解绑中间层的数据传输
    destroyed: function () {}, // 实例销毁后调用
    methods: {
      submit () {
        if (this.newPass !== this.repeatPass) {
          this.$message.error('两次密码不一致！！')
          this.status = false
        } else if (this.newPass.length < 6 && this.repeatPass.length < 6) {
          this.$message.error('密码必须大于6位！！')
          this.status = false
        } else if (!this.currentPass) {
          this.$message.error('当前密码不能为空！！')
          this.status = false
        } else {
          this.status = true
        }

        if (this.status) {
          rePass({
            'newpwd': this.newPass,
            'oldpwd': this.currentPass
          }).then((data) => {
            let status = data.data.status
            if (status == 'y') {
              this.$message.success('密码修改成功！！！')
              this.$bus.$emit('userOut', true)
            } else if (status == 'pwdError') {
              this.$message.error('原密码不正确！！！')
            }
          })
        }
      }
    } // 函数

  }
</script>

<style lang="scss">
    .settings {
        .el-collapse-item__content {
            padding-bottom: 0;
        }
        .el-collapse-item__wrap {
            border-bottom: 0;
        }
        border-top: 1px solid #d7d7d7;
        background-color: #f8f8fc;
        padding-bottom: 30px;
        .inner {
            .el-collapse-item__header{
                height: 70px;
                line-height: 70px;
                border-bottom: 1px dashed #d7d7d7;
                >i {
                    display: none;
                }
            }
            min-height: 200px;
            .title {
                font-size: 24px;
                color: #2CB7CA;
                line-height: 80px;
            }
            .container {
                background-color: #fff;
                box-sizing: border-box;
                border: 1px solid #d7d7d7;
                border-top: 2px solid #2CB7CA;
                .c-title {
                    height: 80px;
                    line-height: 80px;
                    background: #f9feff url(../assets/yellow-radious.png) 30px center no-repeat;
                    box-sizing: border-box;
                    padding-left: 57px;
                    display: flex;
                    justify-content: flex-start;
                    border-bottom: 1px solid #d7d7d7;
                    align-items: center;
                    img {
                        margin-right: 10px;
                    }
                }
                .inner {
                    padding: 0 30px 0 30px;
                    .pass {
                        height: 70px;
                        line-height: 70px;
                        border-bottom: 1px dashed #d7d7d7;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        span {
                            font-size: 15px;
                            &:nth-of-type(2) {
                                margin: 0 12px;
                            }
                            &:last-of-type {
                                font-size: 14px;
                                color: #2CB7CA;
                                cursor: pointer;
                            }
                        }
                    }
                    .passDiv {
                        padding-top: 28px;
                        .h50 {
                            height: 50px;
                            line-height: 50px;
                            margin-bottom: 10px;
                            .pub-leftTitle {
                                display: inline-block;
                                width: 110px;
                                line-height: 50px;
                                text-align: right;
                            }
                            input {
                                display: inline-block;
                                width: 440px;
                                height: 44px;
                                line-height: 44px;
                                border: 1px solid #d7d7d7;
                                border-radius: 3px;
                                padding-left: 40px;
                                box-sizing: border-box;
                            }
                            .btn {
                                display: inline-block;
                                width: 110px;
                                height: 44px;
                                line-height: 44px;
                                cursor: pointer;
                                background-color: #2CB7CA;
                                color: #fff;
                                font-size: 14px;
                                padding: 0;
                                text-align: center;
                                border: none;
                            }
                        }
                    }
                }
            }
        }
    }
</style>